{% extends 'base.html' %}
{% block title %}项目{% endblock %}
{% block content %}
<div class="table-responsive-md">
    <table id="projects-list" class="table">
        <thead>
        <tr>
            <th scope="col" class="text-nowrap text-center">启用</th>
            <th scope="col" class="text-nowrap text-center">状态</th>
            <th scope="col" class="text-nowrap">名称</th>
            <th scope="col" class="text-nowrap">描述</th>
            <th scope="col" class="text-nowrap text-center">上次部署时间</th>
            <th scope="col" class="text-nowrap">上次部署用时</th>
            <th scope="col" class="text-nowrap text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for project in projects %}
        <tr data-role="project" data-project-name="{{ project.name }}">
            {% if project.enabled %}
            <td class="text-success text-nowrap text-center"><span class="oi oi-check"></span></td>
            {% else %}
            <td class="text-muted text-nowrap text-center"><span class="oi oi-x"></span></td>
            {% endif %}
            {% if project.status == 0 %}
            <td class="text-muted text-nowrap text-center">未部署</td>
            {% elif project.status == 1 %}
            <td class="text-info text-nowrap text-center">执行中</td>
            {% elif project.status == 2 %}
            <td class="text-success text-nowrap text-center">已成功</td>
            {% elif project.status == 3 %}
            <td class="text-danger text-nowrap text-center">已失败</td>
            {% else %}
            <td class="text-warning text-nowrap text-center"><em>({{ project.status }})</em></td>
            {% endif %}
            <td class="text-nowrap">{{ project.name }}</td>
            <td class="text-nowrap">{{ project.description }}</td>
            <td class="text-nowrap text-center">
                {% if project.last_timestamp %}
                {{ moment(project.last_timestamp).fromNow(refresh=True) }}
                {% endif %}
            </td>
            <td class="text-nowrap">{% if project.last_duration %}<span class="flask-moment" data-duration="{{ project.last_duration }}" style="display:none"></span>{% endif %}</td>
            <!-- [{{ (','.join(project.jobs)) | safe }}] -->
            <td class="text-nowrap text-center">
                <div class="btn-group" role="group">
                    {% if has_job(project, 'deploy') %}
                    <a class="btn btn-primary btn-sm" data-role="job" data-job="deploy"><span class="oi oi-arrow-thick-top icon"></span>部署</a>
                    {% endif %}
                    {% if has_job(project, 'restore') %}
                    <a class="btn btn-secondary btn-sm" data-role="job" data-job="restore"><span class="oi oi-arrow-top icon"></span>恢复</a>
                    {% endif %}
                    {% if has_job(project, 'archive') %}
                    <a class="btn btn-secondary btn-sm" data-role="job" data-job="archive"><span class="oi oi-arrow-thick-bottom icon"></span>归档</a>
                    {% endif %}
                </div>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script>
'use strict';
$('#projects-list [data-timestamp]').each(function() {
    let timestamp = $(this).data('timestamp');
    $(this).attr('title', moment(timestamp).format('LLL'));
});
$('#projects-list [data-role=job]').click(evt => {
    const btn = $(evt.target);
    const job = btn.attr('data-job')
    const pc = btn.parents('[data-project-name]').first();
    const project_name = pc.attr('data-project-name');

    $.post({
        url: '{{ url_for("jobs.execute") }}',
        data: {
            'project-name': project_name,
            'job-type': job
        }
    })
    .done(data => {
        console.log(data);
    });
});
</script>
{% endblock %}
